<template>
  <div class="box">
    <div class="item" v-for="item in carousel" :key="item.id">
      <i class="icon el-icon-close" @click="remove(item.id)"></i>
      <img :src="getImgUrl(item.name)" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "CarouselList",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
      carousel: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getImgUrl(url) {
      return import.meta.env.VITE_SERVE_BASE_URL + "/" + url;
    },
    getList() {
      axios.get("/carousel/list").then((res) => {
        this.carousel = res.list;
      });
    },
    remove(imgId) {
      axios
        .post("/carousel/backend/remove", {
          id: this.user.id,
          imgId,
        })
        .then(
          (res) => {
            this.$message.success(res.message);
            this.getList();
          },
          (err) => {
            this.$message.error(err);
          }
        );
    },
  },
};
</script>
<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  overflow: auto;
  align-content: flex-start;
}

.item {
  position: relative;
  width: 360px;
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 20px;
}

.item .icon {
  display: block;
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.item img {
  width: 100%;
  height: 100%;
}
</style>
